/**
 * @file
 * @author  阿紫
 * @date  2017/3/16
 */

import React from 'react'
import {Cascader} from 'antd';
import area from './area'
import city from './city'
import province from './province'
var options = province;
let tmp = [];
options.map(item => {
  let obj = {};
  obj.key = item.id;
  obj.value = item.id;
  obj.label = item.name;
  obj.isLeaf = false;
  tmp.push(obj)
});
const RegionCascader = React.createClass({
  getInitialState(){
    return {
      options: tmp,
    }
  },
  loadDataRC (selectedOptions)  {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;
    console.log(selectedOptions);
    let cityArr = city[selectedOptions[0].value];
    let cityArr2 = [], areaArr2 = [];
    if (selectedOptions.length > 1) {
      let areaArr = area[selectedOptions[1].value];
      setTimeout(() => {
        targetOption.loading = false;
        areaArr.map(item => {
          let obj = {};
          obj.key = item.id;
          obj.value = item.id;
          obj.label = item.name;
          obj.isLeaf = true;
          areaArr2.push(obj);
        });
        targetOption.children = areaArr2;
        this.setState({
          options: [...this.state.options],
        });
      }, 20);
    } else {
      setTimeout(() => {
        targetOption.loading = false;
        cityArr.map(item => {
          let obj = {};
          obj.key = item.id;
          obj.value = item.id;
          obj.label = item.name;
          obj.isLeaf = false;
          cityArr2.push(obj);
        });
        targetOption.children = cityArr2;
        this.setState({
          options: [...this.state.options],
        });
      }, 20);
    }
  },
  onChangeRC (value, selectedOptions)  {
    console.log(value, selectedOptions);
    this.props.handle(value, selectedOptions);
  },
  render () {
    return <div>
      <Cascader
        options={this.state.options}
        onChange={this.onChangeRC}
        loadData={this.loadDataRC}
        changeOnSelect={false}
        expandTrigger="hover"
        placeholder="请选择所在地区"/>
    </div>
  }
});
export default RegionCascader
